<template>
  <div class="relative h-full">
    <div class="text-[24px] text-center my-[20px]">购物车</div>
    <a-table
      row-key="id"
      :row-selection="rowSelection"
      :columns="columns"
      v-model:selectedKeys="selectedKeys"
      :data="shopcarList"
      column-resizable
    >
      <template #operation="{ record }">
        <a-button class="cursor-pointer" @click="delitem(record.id)">删除</a-button>
      </template>
    </a-table>
    <div class="absolute bottom-[20px] right-[20px]">
      <a-button @click="toPay" class="w-[150px]" type="primary">结算</a-button>
    </div>
    <pay-view
      :moneyTotal="moneyTotal"
      v-model:visible="payshow"
      v-if="payshow"
    ></pay-view>
  </div>
</template>

<script setup lang="ts">
import { delshopcar, getshopCarList } from "@/api/shop";
import { userStore } from "@/store";
import PayView from "./component/payview.vue";
import { Message, TableRowSelection } from "@arco-design/web-vue";
import { ref } from "vue";
const shopcarList = ref();
const payshow = ref(false);
const moneyTotal = ref();
const selectedKeys = ref([]);
const rowSelection: TableRowSelection = {
  type: "checkbox",
  showCheckedAll: true,
};
const columns = [
  {
    title: "商品名称",
    dataIndex: "shopname",
  },
  {
    title: "价格",
    dataIndex: "price",
  },
  {
    title: "数量",
    dataIndex: "number",
  },
  {
    title: "总价",
    dataIndex: "total",
  },
  {
    title: "操作",
    dataIndex: "operation",
    slotName: "operation",
  },
];
const getList = async () => {
  try {
    let res = await getshopCarList({
      shopCarId: 1,
    });
    if (res.code == 200) {
      console.log(res);
      shopcarList.value = res.data;
      shopcarList.value.map((el: { total: number; price: number; number: number }) => {
        el.total = el.price * el.number;
      });
      moneyTotal.value = shopcarList.value.reduce(
        (sum: any, el: { total: any }) => sum + el.total,
        0
      );
    }
  } catch (error) {
    console.error(error);
  }
};
const delitem = async (id: number) => {
  try {
    let res = await delshopcar({ id: id });
    if (res.code == 200) {
      Message.success("删除成功");
      getList();
    } else {
      Message.error("删除失败");
    }
  } catch (error) {
    console.error(error);
  }
};
const toPay = () => {
  payshow.value = true;
};
userStore().getUser();
console.log(userStore().usermsg);

getList();
</script>

<style scoped></style>
